<template>
  <a-row :gutter="[16, 16]" :wrap="true">
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">计租率 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerList, pickerList]"
            v-model:value="render"
            @change="renderCharts"
          />
        </a-col>
        <div id="echartsDate" class="chart"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">月出租率走势 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerMonthly, pickerMonthly]"
            v-model:value="monthly"
            @change="monthlyEcharts"
          />
        </a-col>
        <div id="monthly" class="chart"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">现金流 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :placeholder="['开始日期', '结束日期']"
            format="YYYY-MM"
            :value="value"
            :mode="mode2"
            @panelChange="handlePanelChange2"
            @change="handleChange"
          />
        </a-col>
        <div id="cashEcharts"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">计租均价 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerAverag, pickerAverag]"
            v-model:value="AverageMoment"
            @change="AverageRent"
          />
        </a-col>
        <div id="AverageRent"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">租金平效 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerlization, pickerlization]"
            v-model:value="RentEqualizationMoment"
            @change="RentEqualization"
          />
        </a-col>
        <div id="RentEqualization"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">分摊收缴率 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerShareRate, pickerShareRate]"
            v-model:value="shareRateMoment"
            @change="shareRate"
          />
        </a-col>
        <div id="shareRate"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">成交走势 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerdeal, pickerdeal]"
            v-model:value="dealMoment"
            @change="dealEcharts"
          />
        </a-col>
        <div id="dealEcharts"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">逾期排名 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerRanking, pickerRanking]"
            v-model:value="overdueMoment"
            @change="overdueRanking"
          />
        </a-col>
        <div id="overdueRanking" v-show="overdueRankingList.length"></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="overdueRankingList.length == 0"
        />
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">合同到期分布 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerContract, pickerContract]"
            v-model:value="contractMomoent"
            @change="contractExpire"
          />
        </a-col>
        <div id="contractExpire"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">收益</a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerProfit, pickerProfit]"
            v-model:value="profitMoment"
            @change="profit"
          />
        </a-col>
        <div id="profit"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">空置房源空置天数排名</a-col>
        <a-col style="margin: 10px 0"> </a-col>
        <div id="vacantDays" v-show="vacantDaysList.length"></div>
        <Empty
          style="margin-top: 235px"
          :image="simpleImage"
          v-show="vacantDaysList.length == 0"
        />
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">租金流失排名 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerRentLoss, pickerRentLoss]"
            v-model:value="rentLossMoment"
            @change="rentLoss"
          />
        </a-col>
        <div id="rentLoss" v-show="rentLossList.length"></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="rentLossList.length == 0"
        />
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">全部房源户型分布 </a-col>
        <div id="allListings"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">退租面积行业占比</a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerLeaseback, pickerLeaseback]"
            v-model:value="leasebackMoment"
            @change="leasebackArea"
          />
        </a-col>
        <div
          id="leasebackArea"
          style="margin-right: 50px"
          v-show="leasebackAreaLsit.length"
        ></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="leasebackAreaLsit.length == 0"
        />
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">行业分析 </a-col>
        <div id="industryAnalysis" style="margin-right: 100px"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">退租原因分析 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerCause, pickerCause]"
            v-model:value="causeAnalysisMoment"
            @change="causeAnalysis"
          />
        </a-col>
        <div
          id="causeAnalysis"
          style="margin-right: 50px"
          v-show="causeAnalysisList.length"
        ></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="causeAnalysisList.length == 0"
        />
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">空置天数占比 </a-col>
        <a-col style="margin: 10px 0">
          <a-range-picker
            :mode="[pickerVacant, pickerVacant]"
            v-model:value="vacantMment"
            @change="vacantEcharts"
          />
        </a-col>
        <div
          id="vacantEcharts"
          style="margin-right: 70px"
          v-show="vacantEchartsList.length"
        ></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="vacantEchartsList.length == 0"
        />
      </a-card>
    </a-col>

    <a-col :span="12">
      <a-card style="height: 650px; padding: 10px">
        <a-col class="head">标签分析</a-col>
        <div
          id="labelAnalysis"
          style="margin-right: 100px"
          v-show="vacantList.length"
        ></div>
        <Empty
          style="margin-top: 243px"
          :image="simpleImage"
          v-show="vacantList.length == 0"
        />
      </a-card>
    </a-col>

    <a-col :span="6">
      <a-card style="height: 215px; padding: 15px" :hoverable="true">
        <div style="" class="heads">
          <span style="flex: 1"> 当前计租率 </span>
          <span> </span>
        </div>
        <div style="font-weight: 600; margin-bottom: 75px; font-size: 20px">
          {{ nowRentalRate.forecastRentalRate }} %
        </div>
        <div style="width: 100%; padding: 0 5px; margin-bottom: 10px">
          <div class="linear"></div>
        </div>
        <div style="margin-bottom: 20px">
          预计全年计租率: {{ nowRentalRate.rentalRate }} %
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card style="height: 215px; padding: 10px" :hoverable="true">
        <div style="" class="heads">
          <span style="flex: 1"> 全年租金平效 </span>
          <span> </span>
        </div>
        <div style="font-weight: 600; margin-bottom: 50px; font-size: 20px">
          <span>{{ annualRentList.rentAverage }}</span
          >元/m²·天
        </div>
        <div style="margin-bottom: 20px">
          全年计租均价: {{ annualRentList.rentEffect }} 元/m²·天
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card style="height: 215px; padding: 10px" :hoverable="true">
        <div style="" class="heads">
          <span style="flex: 1"> 今年实际现金流 </span>
          <span> </span>
        </div>
        <div style="font-weight: 600; margin-bottom: 43px; font-size: 20px">
          {{ amountStreamWatch }}
        </div>
        <div style="display: flex">
          <span style="flex: 1">
            收入:
            <span style="color: #ffa4a4">{{ incomeWatch }}</span>
          </span>
          <span>
            支出:
            <span style="color: #90e0c6">{{ payWatch }}</span>
          </span>
        </div>
        <div
          style="
            width: 100%;
            padding: 0 5px;
            margin-bottom: 10px;
            margin-top: 15px;
          "
        >
          <div class="linear"></div>
        </div>
        <div>全年现金流预测: {{ incomeStaticWatch }} (收入)</div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card style="height: 215px; padding: 10px" :hoverable="true">
        <div style="" class="heads">
          <span style="flex: 1"> 收缴率 </span>
          <span> </span>
        </div>
        <div style="font-weight: 600; margin-bottom: 19px; font-size: 20px">
          {{ collectionRateList.paymentRate }} %
        </div>
        <div style="margin-bottom: 17px; width: 100%">
          <div style="width: 100%">
            <Progress
              :percent="collectionRateList.paymentRate"
              :show-info="false"
            />
          </div>
          <div>
            逾期未结清租客数: {{ collectionRateList.overDueOwnerCount }}
          </div>
        </div>
        <div style="width: 100%; padding: 0 5px; margin-bottom: 10px">
          <div class="linear"></div>
        </div>
        <div style="margin-bottom: 20px">
          逾期未结清账单金额: {{ overDueBillAmountWatch }}
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  reactive,
  nextTick,
} from "vue";
import {
  QuestionCircleOutlined,
  MenuOutlined,
  DownloadOutlined,
  FormOutlined,
  DeleteOutlined,
  CheckSquareOutlined,
  PlusOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";
import { Empty, Modal, Progress } from "ant-design-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import { tuple } from "ant-design-vue/lib/_util/type";
import moment from "moment";
import dayOfYear from "moment/plugin/dayOfYear";
moment.extend(dayOfYear);
const dateFormat = "YYYY-MM-DD";

export default defineComponent({
  name: "eacharts",
  components: {
    // QuestionCircleOutlined,
    MenuOutlined,
    DownloadOutlined,
    // FormOutlined,
    // DeleteOutlined,
    CheckSquareOutlined,
    PlusOutlined,
    CaretDownOutlined,
    Progress,
    Empty,
  },
  setup() {
    const type = ref("date");
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    const pickerList = ref("date");
    const changeSelect = (valueChange) => {
      pickerList.value = valueChange;
      console.log(valueChange);
    };
    const pickerValue = ref("");

    // 当前记租率列表
    const nowRentalRate = ref([]);
    const rentalRate = () => {
      request.get("/org", "/board/nowRentalRate").then((res) => {
        nowRentalRate.value = res.list;
      });
    };
    rentalRate();
    // 全年租金平效
    const annualRentList = ref([]);
    const annualRent = () => {
      request.get("/org", "/board/nowRentEffect").then((res) => {
        annualRentList.value = res.list;
      });
    };
    annualRent();
    // 今年实际现金流
    const cashFlowList = ref({});
    const incomeStaticWatch = computed(() => {
      return String(parseInt(cashFlowList.value.expectIncome)).length < 5
        ? Number(cashFlowList.value.expectIncome).toFixed(2) + " " + "元"
        : String(parseInt(cashFlowList.value.expectIncome)).length > 8
        ? Number(cashFlowList.value.expectIncome / 100000000).toFixed(2) +
          " " +
          "亿"
        : Number(cashFlowList.value.expectIncome / 10000).toFixed(2) +
          " " +
          "万元";
    });
    const amountStreamWatch = computed(() => {
      return String(parseInt(cashFlowList.value.amountStream)).length < 5
        ? Number(cashFlowList.value.amountStream) + " " + "元"
        : String(parseInt(cashFlowList.value.amountStream)).length > 8
        ? Number(cashFlowList.value.amountStream / 100000000).toFixed(2) +
          " " +
          "亿"
        : Number(cashFlowList.value.amountStream / 10000).toFixed(2) +
          " " +
          "万元";
    });
    const incomeWatch = computed(() => {
      return String(parseInt(cashFlowList.value.income)).length < 5
        ? Number(cashFlowList.value.income) + " " + "元"
        : String(parseInt(cashFlowList.value.income)).length > 8
        ? Number(cashFlowList.value.income / 100000000).toFixed(2) + " " + "亿"
        : Number(cashFlowList.value.income / 10000).toFixed(2) + " " + "万元";
    });
    const payWatch = computed(() => {
      return String(parseInt(cashFlowList.value.pay)).length < 5
        ? Number(cashFlowList.value.pay) + " " + "元"
        : String(parseInt(cashFlowList.value.pay)).length > 8
        ? Number(cashFlowList.value.pay / 100000000).toFixed(2) + " " + "亿"
        : Number(cashFlowList.value.pay / 10000).toFixed(2) + " " + "万元";
    });
    const cashFlow = () => {
      request.get("/org", "/asset/incomeStatic").then((res) => {
        cashFlowList.value = res;
      });
    };
    cashFlow();
    // 收缴率
    const collectionRateList = ref({});
    const overDueBillAmountWatch = computed(() => {
      return String(parseInt(collectionRateList.value.overDueBillAmount))
        .length < 5
        ? Number(collectionRateList.value.overDueBillAmount).toFixed(2) +
            " " +
            "元"
        : String(parseInt(collectionRateList.value.overDueBillAmount)).length >
          8
        ? Number(
            collectionRateList.value.overDueBillAmount / 100000000
          ).toFixed(2) +
          " " +
          "亿"
        : Number(collectionRateList.value.overDueBillAmount / 10000).toFixed(
            2
          ) +
          " " +
          "万元";
    });
    const collectionRate = () => {
      request.get("/org", "/asset/paymentRate").then((res) => {
        collectionRateList.value = res;
      });
    };
    collectionRate();

    // 记租率 Echarts
    const chartMap = {};
    const render = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const renderCharts = () => {
      if (!chartMap.chart1) {
        chartMap.chart1 = new Chart({
          container: "echartsDate",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartMap.chart1.scale({
          rentalRate: {
            max: 100,
            min: 0,
            nice: true,
          },
          monthDate: {
            tickCount: 20,
          },
        });
        chartMap.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        chartMap.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        chartMap.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 725,
        });

        chartMap.chart1.axis("rentalRate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartMap.chart1.axis("monthDate", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartMap.chart1
          .area()
          .position("monthDate*rentalRate")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartMap.chart1
          .line()
          .position("monthDate*rentalRate")
          .shape("smooth")
          .color("name");
        chartMap.chart1.legend(false);
      }
      request
        .get("/org", "/board/rentalRate", {
          start_time: render.value[0].format(dateFormat),
          end_time: render.value[1].format(dateFormat),
        })
        .then((res) => {
          chartMap.chart1.changeData(res.list);
          chartMap.chart1.render();
        });
    };

    // 月出租率走势 Echarts
    const chartmonthly = {};
    const pickerMonthly = ref("date");
    const monthly = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const monthlyEcharts = () => {
      if (!chartmonthly.chart1) {
        chartmonthly.chart1 = new Chart({
          container: "monthly",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartmonthly.chart1.scale({
          rentalRate: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        chartmonthly.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });

        chartmonthly.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        chartmonthly.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
        });

        chartmonthly.chart1.axis("rentalRate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartmonthly.chart1.axis("monthDate", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartmonthly.chart1
          .area()
          .position("monthDate*rentalRate")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartmonthly.chart1
          .line()
          .position("monthDate*rentalRate")
          .color("name")
          .shape("smooth");
        chartmonthly.chart1.legend(false);
      }
      request
        .get("/org", "/board/monthRentalRate", {
          start_time: monthly.value[0].format(dateFormat),
          end_time: monthly.value[1].format(dateFormat),
        })
        .then((res) => {
          chartmonthly.chart1.changeData(res.list);
          chartmonthly.chart1.render();
        });
    };

    //现金流 Echarts
    const mode2 = ref(["month", "month"]);
    const value = ref([]);
    const handleChange = (val) => {
      value.value = val;
    };
    const handlePanelChange2 = (val, mode) => {
      value.value = val;
      mode2.value = [
        mode[0] === "date" ? "month" : mode[0],
        mode[1] === "date" ? "month" : mode[1],
      ];
      cash(val[0].format("YYYY-MM"), val[1].format("YYYY-MM"));
    };

    const chartCash = {};
    const pickerCash = ref("date");
    const cashMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const cash = (start_date, end_date) => {
      if (!chartCash.chart1) {
        chartCash.chart1 = new Chart({
          container: "cashEcharts",
          autoFit: true,
          height: 500,
          padding: [70],
        });

        chartCash.chart1.tooltip({
          showMarkers: false,
        });
        chartCash.chart1.interaction("active-region");
        chartCash.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 725,
        });

        chartCash.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        chartCash.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });

        chartCash.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartCash.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val / 10 + ".00";
            },
          },
          position: "left",
        });
        chartCash.chart1.axis("net_amount", {
          position: "left",
          animate: true,
          label: {
            formatter: (val) => {
              return +val / 10 + ".00";
            },
          },
        });
        chartCash.chart1.scale({
          amount: {
            min: 0,
            nice: true,
          },
          net_amount: {
            min: 0,
            nice: true,
          },
        });
        chartCash.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .size(10)
          .color("name", (val) => {
            if (val === "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.5,
            },
          ]);

        chartCash.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
        chartCash.chart1
          .area()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
      }
      request
        .get("/org", "/board/cashFlow", {
          start_date: start_date
            ? start_date
            : moment().dayOfYear(1).format("YYYY-MM"),
          end_date: end_date
            ? end_date
            : moment().dayOfYear(365).format("YYYY-MM"),
        })
        .then((res) => {
          const data = res.list;
          let listCash = data.filter((item) => !item.net_name);
          let newListCash = listCash.map((item) => item.amount);

          let listNewCash = data.filter((item) => item.net_name);
          let listsCash = listNewCash.map((itme) => itme.net_amount);
          let arrCash = Math.max(...newListCash, ...listsCash);
          chartCash.chart1.annotation().text({
            content:
              String(parseInt(arrCash)).length < 5
                ? "元"
                : String(parseInt(arrCash)).length > 8
                ? "亿"
                : "万元",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -32,
          });
          chartCash.chart1.scale({
            amount: {
              max: Number(arrCash),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arrCash),
              min: 0,
              nice: true,
            },
          });
          chartCash.chart1.changeData(data);
          chartCash.chart1.render();
        });
    };

    // 计租均价 Echarts
    const Averag = {};
    const pickerAverag = ref("date");
    const AverageMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const AverageRent = (date) => {
      if (!Averag.chart1) {
        Averag.chart1 = new Chart({
          container: "AverageRent",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        Averag.chart1.scale({
          rentAverage: {
            // max: 3.5,
            nice: true,
          },
        });
        Averag.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        Averag.chart1.annotation().text({
          content: "元/m²/天",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -40,
        });
        Averag.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        Averag.chart1.axis("rentAverage", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });

        Averag.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        Averag.chart1
          .area()
          .position("date*rentAverage")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        Averag.chart1
          .line()
          .position("date*rentAverage")
          .shape("smooth")
          .color("name");
        Averag.chart1.legend(false);
        Averag.chart1.render();
      }
      request
        .get("/org", "/board/rentAverage", {
          start_date: AverageMoment.value[0].format(dateFormat),
          end_date: AverageMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          Averag.chart1.changeData(res.list);
          Averag.chart1.render();
        });
    };

    // 租金平效 Echarts
    const lization = {};
    const pickerlization = ref("date");
    const RentEqualizationMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const RentEqualization = () => {
      if (!lization.chart1) {
        lization.chart1 = new Chart({
          container: "RentEqualization",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        lization.chart1.scale({
          rentEffect: {
            nice: true,
          },
        });
        lization.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        lization.chart1.annotation().text({
          content: "元/m²/天",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -40,
        });
        lization.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        lization.chart1.axis("rentEffect", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });

        lization.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        lization.chart1
          .area()
          .position("date*rentEffect")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        lization.chart1
          .line()
          .position("date*rentEffect")
          .shape("smooth")
          .color("name");
        lization.chart1.legend(false);
      }
      request
        .get("/org", "/board/rentEffect", {
          start_date: RentEqualizationMoment.value[0].format(dateFormat),
          end_date: RentEqualizationMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          lization.chart1.changeData(res.list);
          lization.chart1.render();
        });
    };

    // 分摊收缴率
    const share = {};
    const pickerShareRate = ref("date");
    const shareRateMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const shareRate = (date) => {
      if (!share.chart1) {
        share.chart1 = new Chart({
          container: "shareRate",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        share.chart1.scale({
          rate: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        share.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        share.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        share.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "年",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: -30,
          // offsetX: -20,
        });

        share.chart1.axis("rate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val + "%";
            },
          },
        });

        share.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        share.chart1.legend({
          position: "top-right",
        });

        share.chart1.line().position("date*rate").color("name").shape("smooth");
      }
      request
        .get("/org", "/board/collectionRate", {
          startDate: shareRateMoment.value[0].format(dateFormat),
          endDate: shareRateMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          share.chart1.changeData(res.list);
          share.chart1.render();
        });
    };

    // 成交走势
    const deal = {};
    const pickerdeal = ref("date");
    const dealMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const dealEcharts = () => {
      if (!deal.chart1) {
        deal.chart1 = new Chart({
          container: "dealEcharts",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        deal.chart1.scale({
          total: {
            nice: true,
          },
        });
        deal.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        deal.chart1.annotation().text({
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -20,
        });
        deal.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "年",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });

        deal.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return val.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            },
          },
        });

        deal.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        deal.chart1
          .area()
          .position("date*total")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        deal.chart1.line().position("date*total").shape("smooth").color("name");
        deal.chart1.legend(false);
      }
      request
        .get("/org", "/board/dealTread", {
          start_date: dealMoment.value[0].format(dateFormat),
          end_date: dealMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          deal.chart1.changeData(res.list);
          deal.chart1.render();
        });
    };

    // 逾期排名
    const ranking = {};
    const pickerRanking = ref("date");
    const overdueMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const overdueRankingList = ref([]);
    const overdueRanking = () => {
      if (!ranking.chart1) {
        ranking.chart1 = new Chart({
          container: "overdueRanking",
          autoFit: true,
          width: 800,
          height: 500,
          padding: [90, 120, 90, 150],
        });
        ranking.chart1.scale({
          total: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        ranking.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            // offsetY:10,
            offset: 15,
          },
        });
        ranking.chart1.coordinate().transpose();
        ranking.chart1.annotation().text({
          content: "租客名",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -335,
          offsetX: -30,
        });

        ranking.chart1.annotation().text({
          position: ["103%", "100%"],
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 540,
        });

        ranking.chart1.tooltip({
          showMarkers: false,
        });
        ranking.chart1.legend(false);
        ranking.chart1.interaction("active-region");
        ranking.chart1
          .interval()
          .position("owner*percent")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
      }
      request
        .get("/org", "/board/overdueRank", {
          start_date: overdueMoment.value[0].format(dateFormat),
          end_date: overdueMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          overdueRankingList.value = res.list;
          ranking.chart1.changeData(res.list);
          ranking.chart1.render();
        });
    };

    // 合同到期分布
    const contract = {};
    const pickerContract = ref("date");
    const contractMomoent = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const contractExpireList = ref([]);
    const contractExpire = () => {
      if (!contract.chart1) {
        contract.chart1 = new Chart({
          container: "contractExpire",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        contract.chart1.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        contract.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        contract.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });
        contract.chart1.annotation().text({
          content: "份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -18,
        });
        contract.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });

        contract.chart1.tooltip({
          showMarkers: false,
        });
        contract.chart1.interaction("active-region");

        contract.chart1
          .interval()
          .position("date*total")
          .style({ radius: [20, 20, 0, 0] })
          .color("name")
          .size(20);

        contract.chart1.legend({
          position: "top-right",
        });
        contract.chart1.legend(false);
      }
      request
        .get("/org", "/board/overdueContractSpread", {
          start_date: contractMomoent.value[0].format(dateFormat),
          end_date: contractMomoent.value[1].format(dateFormat),
        })
        .then((res) => {
          contract.chart1.changeData(res.list);
          contract.chart1.render();
        });
    };

    // 收益
    const profitChart = {};
    const pickerProfit = ref("date");
    const profitMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const profit = (date) => {
      if (!profitChart.chart1) {
        profitChart.chart1 = new Chart({
          container: "profit",
          autoFit: true,
          height: 500,
          padding: [70],
        });

        profitChart.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        profitChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });
        profitChart.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return val + ".00";
            },
          },
          position: "left",
        });
        profitChart.chart1.axis("net_amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return val + ".00";
            },
          },
          position: "left",
        });
        profitChart.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        profitChart.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });

        profitChart.chart1.tooltip({
          showMarkers: false,
        });
        profitChart.chart1.interaction("active-region");

        profitChart.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .color("name", (val) => {
            if (val == "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .size(20);
        profitChart.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .style({ radius: [20, 20, 0, 0] });
      }
      request
        .get("/org", "/board/profitStatic", {
          start_date: profitMoment.value[0].format(dateFormat),
          end_date: profitMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          const data = res.list;
          let listProfit = data.filter((item) => item.amount);
          let newListProfit = listProfit.map((item) => item.amount);

          let listNewProfit = data.filter((item) => item.net_amount);
          let listsCashProfit = listNewProfit.map((itme) => itme.net_amount);
          let arrCashProfit = Math.max(...newListProfit, ...listsCashProfit);

          profitChart.chart1.annotation().text({
            content:
              String(parseInt(arrCashProfit)).length < 5
                ? "元"
                : String(parseInt(arrCashProfit)).length > 8
                ? "亿"
                : "万元",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -33,
          });
          profitChart.chart1.scale({
            amount: {
              max: Number(arrCashProfit),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arrCashProfit),
              min: 0,
              nice: true,
            },
          });
          profitChart.chart1.changeData(res.list);
          profitChart.chart1.render();
        });
    };

    // 空置房源空置天数排名
    const vacantDaysList = ref([]);
    const vacantDays = () => {
      const chart = new Chart({
        container: "vacantDays",
        autoFit: true,
        height: 500,
        width: 800,
        padding: [90, 150],
      });
      let data = [];
      request.get("/org", "/board/roomVacantRank").then((res) => {
        vacantDaysList.value = res.list;
        data = res.list;
        chart.data(data);
        chart.scale({
          days: {
            min: 0,
            nice: true,
          },
        });
        chart.axis("days", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            offsetX: -10,
          },
        });
        chart.axis("roomName", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });
        chart.annotation().text({
          position: ["102%", "100%"],
          content: "天数",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 560,
        });
        chart.coordinate().transpose();

        chart.tooltip({
          showMarkers: false,
        });
        chart.axis({
          label: {
            rotate: -1,
          },
        });
        chart.legend(false);
        chart.interaction("active-region");
        chart
          .interval()
          .position("roomName*days")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        chart.render();
      });
    };

    // 租金流失排名
    const rentLossChart = {};
    const pickerRentLoss = ref("date");
    const rentLossMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const rentLossList = ref([]);
    const rentLoss = () => {
      if (!rentLossChart.chart1) {
        rentLossChart.chart1 = new Chart({
          container: "rentLoss",
          autoFit: true,
          width: 800,
          height: 500,
          padding: [90, 150],
        });
        rentLossChart.chart1.scale({
          totals: {
            nice: true,
          },
        });
        rentLossChart.chart1.axis("totals", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
              // .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            },
            rotate: -1,
            offset: 1,
            offsetX: -10,
          },
        });
        rentLossChart.chart1.coordinate().transpose();

        rentLossChart.chart1.tooltip({
          showMarkers: false,
        });
        rentLossChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "元",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 570,
        });
        rentLossChart.chart1.axis({
          label: {
            rotate: -1,
          },
        });

        rentLossChart.chart1.interaction("active-region");
        rentLossChart.chart1
          .interval()
          .position("roomName*totals")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        rentLossChart.chart1.legend(false);
      }
      request
        .get("/org", "/source/rentLossRank", {
          startDate: rentLossMoment.value[0].format(dateFormat),
          endDate: rentLossMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          rentLossList.value = res.list;
          rentLossChart.chart1.changeData(res.list);
          rentLossChart.chart1.render();
        });
    };

    // 全部房源户型分布
    const allListings = () => {
      const chart = new Chart({
        container: "allListings",
        autoFit: true,
        height: 500,
        padding: [80],
      });
      let data = [];
      request.get("/org", "/source/roomTypeSpread").then((res) => {
        data = res.list;
        chart.data(data);
        chart.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        chart.axis("groupName", {
          label: {
            rotate: -1,
            offset: 35,
          },
          tickLine: null,
        });
        chart.annotation().text({
          content: "个",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -20,
        });
        chart.annotation().text({
          position: ["102%", "100%"],
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        chart.tooltip({
          showMarkers: false,
        });
        chart.interaction("active-region");

        chart
          .interval()
          .position("groupName*total")
          .style({ radius: [20, 20, 0, 0] })
          .color("name")
          .size(20);

        chart.legend({
          position: "top-right",
        });
        chart.legend(false);

        chart.render();
      });
    };

    // 退租面积行业占比
    const leaseback = {};
    const pickerLeaseback = ref("date");
    const leasebackMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const leasebackAreaLsit = ref([]);
    const leasebackArea = () => {
      if (!leaseback.chart1) {
        leaseback.chart1 = new Chart({
          container: "leasebackArea",
          autoFit: true,
          height: 500,
          padding: [80, 20, 80, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        leaseback.chart1.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        leaseback.chart1.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });
        // 移除图例点击过滤交互
        leaseback.chart1.removeInteraction("legend-filter");
        leaseback.chart1.interaction("element-active");
      }
      request
        .get("/org", "/board/retreatIndustryRatio", {
          start_date: leasebackMoment.value[0].format(dateFormat),
          end_date: leasebackMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          leasebackAreaLsit.value = res.list;
          leaseback.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "m²",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });
          // 声明需要进行自定义图例字段： 'item'
          leaseback.chart1.legend("industryName", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.industryName + obj.totalArea, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  style: {
                    r: 5, // marker 图形半径
                    fill: leaseback.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          leaseback.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("industryName")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });
          leaseback.chart1.changeData(res.list);
          leaseback.chart1.render();
        });
    };

    // 行业分析
    const industryAnalysis = () => {
      const chart = new Chart({
        container: "industryAnalysis",
        autoFit: true,
        height: 500,
        padding: [80, 20, 80, 0],
      });
      let data = [];
      request.get("/org", "/board/industryAnalyse").then((res) => {
        data = res.list;
        chart.data(data);

        // 新建一个 view 用来单独渲染Annotation
        chart.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        chart.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 声明需要进行自定义图例字段： 'item'
        chart.legend("industryName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.industryName + `           ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        chart
          .interval()
          .adjust("stack")
          .position("percent")
          .color("industryName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        chart.removeInteraction("legend-filter");
        chart.interaction("element-active");

        chart.render();
      });
    };

    // 退租原因分析
    const causeChart = {};
    const pickerCause = ref("date");
    const causeAnalysisList = ref([]);
    const causeAnalysisMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const causeAnalysis = () => {
      if (!causeChart.chart1) {
        causeChart.chart1 = new Chart({
          container: "causeAnalysis",
          autoFit: true,
          height: 500,
          width: 700,
          padding: [80, 200, 80, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        causeChart.chart1.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        causeChart.chart1.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 移除图例点击过滤交互
        causeChart.chart1.removeInteraction("legend-filter");
        causeChart.chart1.interaction("element-active");
      }
      request
        .get("/org", "/board/retreatAnalyse", {
          start_date: causeAnalysisMoment.value[0].format(dateFormat),
          end_date: causeAnalysisMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          causeAnalysisList.value = res.list;
          causeChart.chart1.data(res.list);
          causeChart.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "m²",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });

          // 声明需要进行自定义图例字段： 'item'
          causeChart.chart1.legend("name", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.name + obj.total, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  symbol: "square", // marker 的形状
                  style: {
                    r: 5, // marker 图形半径
                    fill: causeChart.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          causeChart.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("name")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });
          causeChart.chart1.render();
        });
    };

    // 空置天数占比
    const vacantChart = {};
    const pickerVacant = ref("date");
    const vacantMment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const vacantEchartsList = ref([]);
    const vacantEcharts = () => {
      if (!vacantChart.chart1) {
        vacantChart.chart1 = new Chart({
          container: "vacantEcharts",
          autoFit: true,
          height: 500,
          width: 700,
          padding: [80, 20, 80, 0],
        });
      }
      request
        .get("/org", "/board/freeRoomRatio", {
          start_date: vacantMment.value[0].format(dateFormat),
          end_date: vacantMment.value[1].format(dateFormat),
        })
        .then((res) => {
          vacantEchartsList.value = res.list;
          // 新建一个 view 用来单独渲染Annotation
          vacantChart.chart1.coordinate("theta", {
            radius: 0.65,
            innerRadius: 0.8,
          });

          vacantChart.chart1.changeData(res.list);
          vacantChart.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "个",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });

          // 声明需要进行自定义图例字段： 'item'
          vacantChart.chart1.legend("groupName", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.groupName + `     ` + obj.groupNum, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  symbol: "square", // marker 的形状
                  style: {
                    r: 5, // marker 图形半径
                    fill: vacantChart.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),

            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          vacantChart.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("groupName")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });

          // 移除图例点击过滤交互
          vacantChart.chart1.removeInteraction("legend-filter");
          vacantChart.chart1.interaction("element-active");
          vacantChart.chart1.render();
        });
    };

    // 标签分析
    const vacantList = ref([]);
    const labelAnalysis = () => {
      const chart = new Chart({
        container: "labelAnalysis",
        autoFit: true,
        height: 500,
        width: 700,
        padding: [80, 200, 80, 0],
      });
      let data = [];
      request.get("/org", "/board/tagAnalyse").then((res) => {
        vacantList.value = res.list;
        data = res.list;
        // 新建一个 view 用来单独渲染Annotation
        chart.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        chart.data(data);
        chart.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 声明需要进行自定义图例字段： 'item'
        chart.legend("tagName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.tagName + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        chart
          .interval()
          .adjust("stack")
          .position("percent")
          .color("tagName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        chart.removeInteraction("legend-filter");
        chart.interaction("element-active");
        chart.render();
      });
    };

    // Echarts图表
    onMounted(() => {
      renderCharts();
      monthlyEcharts();
      cash();
      AverageRent();
      RentEqualization();
      shareRate();
      dealEcharts();
      overdueRanking();
      contractExpire();
      vacantDays();
      rentLoss();
      allListings();
      leasebackArea();
      industryAnalysis();
      causeAnalysis();
      vacantEcharts();
      labelAnalysis();
      profit();
      setTimeout(() => {
        nextTick(() => {
          const e = new Event("resize");
          window.dispatchEvent(e);
        });
      }, 200);
    });

    return {
      changeSelect,
      renderCharts,
      monthlyEcharts,
      cash,
      AverageRent,
      RentEqualization,
      shareRate,
      dealEcharts,
      overdueRanking,
      contractExpire,
      profit,
      rentLoss,
      leasebackArea,
      causeAnalysis,
      vacantEcharts,
      handleChange,
      handlePanelChange2,
      overDueBillAmountWatch,
      type,
      moment,
      pickerVacant,
      pickerCause,
      pickerLeaseback,
      pickerRentLoss,
      pickerList,
      pickerValue,
      collectionRateList,
      cashFlowList,
      dateFormat,
      pickerMonthly,
      pickerCash,
      pickerAverag,
      pickerlization,
      pickerShareRate,
      pickerdeal,
      pickerRanking,
      pickerContract,
      pickerProfit,
      simpleImage,
      render,
      monthly,
      cashMoment,
      AverageMoment,
      RentEqualizationMoment,
      shareRateMoment,
      dealMoment,
      overdueMoment,
      contractMomoent,
      profitMoment,
      rentLossMoment,
      leasebackMoment,
      causeAnalysisMoment,
      vacantMment,
      leasebackAreaLsit,
      vacantList,
      causeAnalysisList,
      rentLossList,
      overdueRankingList,
      nowRentalRate,
      annualRentList,
      vacantEchartsList,
      vacantDaysList,
      mode2,
      value,
      incomeStaticWatch,
      amountStreamWatch,
      incomeWatch,
      payWatch,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  // height: 400px;
  background: #fff;
  padding: 10px;
  width: 49.5%;
  .chart {
    width: 100%;
    margin-left: 8px;
    margin-top: 40px;
  }
  .head {
    font-size: 18px;
    font-weight: 600;
  }
}
.linear {
  height: 1px;
  background-color: #f0f2f5;
}
.heads {
  margin-bottom: 10px;
  display: flex;
}
.box-right {
  background-color: #fff;
}
.head {
  font-size: 18px;
  font-weight: 600;
}
.echarts {
  background-color: #fff;
  margin: 0 10px 10px 0;
  padding: 10px;
  .head {
    font-size: 18px;
    font-weight: 600;
  }
  // .echartsDate {
  //   width: 100%;
  //   height: 300px;
  // }
}
</style>
